import { Form, InputNumber, Space, Checkbox, Divider, Typography } from 'antd';
import { defaultScheduleConfig } from '../../pages/arrange/index';

//排班配置模态框
export const ConfigModal = (props) => {
  const { form } = props;
  const weekdays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
  
  return (
    <div className="modal-box">
      <Form
        form={form}
        layout="vertical"
        name="schedule-config-form"
        initialValues={defaultScheduleConfig}
      >
     
        <Typography.Title level={5} style={{ margin: '12px 0' }}>启用自动排班的日期</Typography.Title>
        <Space className="weekday-selector">
          {weekdays.map((day, index) => (
            <Form.Item
              key={`day-checkbox-${index}`}
              name={['daysEnabled', index]}  // 直接绑定到数组的对应索引
              valuePropName="checked"
              noStyle
            >
              <Checkbox 
                className="weekday-checkbox"
                data-day={day}
              >
                {day}
              </Checkbox>
            </Form.Item>
          ))}
        </Space>
        
        <Divider>服务类型员工配额</Divider>
        
        {Object.entries(defaultScheduleConfig.departmentQuota).map(([treatment]) => (
          <div key={`quota-group-${treatment}`} className="mb-4">
            <Typography.Title level={5} style={{ margin: '12px 0' }}>{treatment}</Typography.Title>
            <div style={{ display: 'flex', gap: 16 }}>
              <Form.Item
                key={`quota-${treatment}-morning`}
                label="上午班"
                name={['departmentQuota', treatment, 'morning']}
                rules={[{
                  type: 'number',
                  min: 0,
                  message: '请输入有效的员工数量'
                }]}
              >
                <InputNumber style={{ width: 100 }} />
              </Form.Item>
              
              <Form.Item
                key={`quota-${treatment}-afternoon`}
                label="下午班"
                name={['departmentQuota', treatment, 'afternoon']}
                rules={[{
                  type: 'number',
                  min: 0,
                  message: '请输入有效的员工数量'
                }]}
              >
                <InputNumber style={{ width: 100 }} />
              </Form.Item>
              
              <Form.Item
                key={`quota-${treatment}-evening`}
                label="晚班"
                name={['departmentQuota', treatment, 'evening']}
                rules={[{
                  type: 'number',
                  min: 0,
                  message: '请输入有效的员工数量'
                }]}
              >
                <InputNumber style={{ width: 100 }} />
              </Form.Item>
            </div>
          </div>
        ))}
      </Form>
    </div>
  );
};
